@import '../css/variable'
@import '../Checkbox/Checkbox.styl';
@import '../Radio/Radio.styl';

.sm-table
    background: $md-colors.white
    width: 100%
    border-collapse: collapse
    border-spacing: 0
    table-layout: fixed

    thead
        border-bottom: 1px solid $md-colors.faintBlack

    th
        padding: 0 12px
        text-align: left
        font-weight: normal
        font-size: 12px
        height: 56px
        line-height: 56px
        color: $md-colors.lightBlack

    tr
        border-bottom: 1px solid $md-colors.faintBlack

    td
        padding: 0 12px
        height: 48px
        text-align: left
        font-size: 13px
        white-space: nowrap
        color: $md-colors.darkBlack

    .sm-table-row-selected
        background: $md-colors.grey100

    .sm-table-col-select
        width: 2rem;
        text-align: center;
        padding: 0 10px

        >.sm-checkbox,
        >.sm-radio
            vertical-align: middle;


.sm-table-hoverable
    tbody
        tr:hover
            background: $md-colors.grey200
